<template>
  <s-layout title="拼币明细" :bgStyle="{ color: '#f2f4f8' }">
    <view class="cart-box ss-flex ss-flex-col ss-row-between">
      <!-- 头部 -->
      <su-sticky bgColor="#fff" style="width: 100%;">
        <!-- <s-search-block  :data="state.searchdata" :radius="80" :navbar="false" placeholder="请输入" lei="3" @sclick="sclick" /> -->
        <su-tabs
          :list="tabMaps"
          :scrollable="false"
          @change="onTabsChange"
          :current="state.currentTab"
        ></su-tabs>
      </su-sticky>
      <!-- 内容  v-for="item in state.pagination.data"
          :key="item.id" -->
      <view class="cart-content">
        <s-empty
          v-if="state.pagination.total === 0"
          icon="/static/order-empty.png"
          text="暂无数据"
        ></s-empty>
         <view class="newlist">
          <view class="newitem">
             <!-- <text class="newtime">2024-07</text> -->
             <view class="newqian" v-for="item in state.pagination.data"
            >
               <view class="qianone">
                 <text class="qianname">{{item.memo}}</text>
                 <text class="qiantime">{{item.createtime}}</text>
               </view>
               <text class="jiajifen" :class="item.score<0?'hong':''">{{item.score}}拼币</text>
             </view>
          </view>
          <!-- <view class="newitem" v-if="state.currentTab == 1">
             <view class="newqian" v-for="item in state.pagination.data"
            >
               <view class="qianone">
                 <text class="qianname">签到</text>
                 <text class="qiantime">2024-07-09 09:40:53</text>
               </view>
               <text class="jiajifen">+10积分</text>
             </view>
          </view> -->
         </view>
      </view>
    </view>
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
    <s-empty
      v-if="state.pagination.total === 0"
      text="暂无浏览记录"
      icon="/static/collect-empty.png"
    />
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { reactive } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import _ from 'lodash';

  const sys_navBar = sheep.$platform.navbar;
  const tabMaps = [
    {
      name: '拼币记录',
      value: 'all',
    },
    {
      name: '兑换记录',
      value: 'unpaid',
    }
  ];
  const pagination = {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
  };
  const state = reactive({
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    loadStatus: '',
    editMode: false,
    selectedCollectList: [],
    selectAll: false,
    currentTab: 0,
  });
  function onTabsChange(e) {
    if (state.currentTab === e.index) return;

    state.pagination = pagination;

    state.currentTab = e.index;
    state.pagination = {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    }
    state.loadStatus= ''
    getData();
    // getOrderList();
  }

  async function getData() {
    if(state.currentTab == 0){
      //积分记录
      state.loadStatus = 'loading';
      let res = await sheep.$api.goods.getScoresLog({
        page:state.pagination.current_page
      });
      console.log(res)
      if (res.code === 1) {
        state.pagination.last_page = res.data.lastpage;
        let list = res.data.list;
        state.pagination.data = state.pagination.current_page == 1 ? list : [...state.pagination.data, ...list];
        if (state.pagination.current_page >= state.pagination.last_page) {
          state.loadStatus = 'noMore';
        }
      }
    }else{
      //兑换记录
      state.loadStatus = 'loading';
      let res = await sheep.$api.goods.getScoreGoodsLog({
        page:state.pagination.current_page
      });
      if (res.code === 1) {
        state.pagination.last_page = res.data.lastpage;
        let list = res.data.list;
        state.pagination.data = state.pagination.current_page == 1 ? list : [...state.pagination.data, ...list];
        if (state.pagination.current_page >= state.pagination.last_page) {
          state.loadStatus = 'noMore';
        }
      }
    }
   
  }
  // 格式化价格
  function formatPrice(e) {
    return e.length === 1 ? e[0] : e.join('~');
  }

  // 单选选中
  const onSelect = (id) => {
    if (!state.selectedCollectList.includes(id)) {
      state.selectedCollectList.push(id);
    } else {
      state.selectedCollectList.splice(state.selectedCollectList.indexOf(id), 1);
    }
    state.selectAll = state.selectedCollectList.length === state.pagination.data.length;
  };
  // 全选
  const onSelectAll = () => {
    state.selectAll = !state.selectAll;
    if (!state.selectAll) {
      state.selectedCollectList = [];
    } else {
      state.pagination.data.forEach((item) => {
        if (state.selectedCollectList.includes(item.goods_id)) {
          state.selectedCollectList.splice(state.selectedCollectList.indexOf(item.goods_id), 1);
        }
        state.selectedCollectList.push(item.goods_id);
      });
    }
  };
  async function onCancel() {
    if (state.selectedCollectList) {
      state.selectedCollectList = state.selectedCollectList.toString();
      const { code } = await sheep.$api.user.view.delete({
        goods_id: state.selectedCollectList,
      });
      if (code === 1) {
        state.editMode = false;
        state.selectedCollectList = [];
        state.selectAll = false;
        state.pagination = pagination;
        getData();
      }
    }
  }
  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      state.pagination.current_page++
      getData();
    }
  }
  onReachBottom(() => {
    loadmore();
  });
  onLoad(() => {
    getData();
  });
</script>

<style lang="scss" scoped>
  .cart-box {
    .cart-header {
      height: 70rpx;
      background-color: #f2f4f8;
      width: 100%;
      position: fixed;
      left: 0;
      top: v-bind('sys_navBar') rpx;
      z-index: 1000;
      box-sizing: border-box;
    }

    .cart-footer {
      height: 100rpx;
      background-color: #fff;

      .pay-btn {
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        padding: 0 40rpx;
        min-width: 200rpx;
      }
    }

    .cart-content {
      width: 100%;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-top: 20rpx;
      .goods-box {
        background-color: #fff;
        &:last-child {
          margin-bottom: 40rpx;
        }
      }
    }
  }

  .title-card {
    padding: 36rpx 0 46rpx 20rpx;

    .img-box {
      width: 164rpx;
      height: 164rpx;

      .order-img {
        width: 164rpx;
        height: 164rpx;
      }
    }

    .check-box {
      height: 100%;
    }

    .title-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }

    .params-box {
      .params-title {
        height: 38rpx;
        background: #f4f4f4;
        border-radius: 2rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #666666;
      }
    }

    .price-text {
      color: $red;
      font-family: OPPOSANS;
    }
  }
  .newitem{
    display: flex;
    flex-direction: column;
    .newtime{
      color: #333;
      font-size: 30rpx;
      display: block;
      margin-bottom: 20rpx;
    }
    .newqian{
      margin-bottom: 20rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx 30rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      .qianone{
        display: flex;
        flex-direction: column;
      }
      .qianname{
        color: #333;
        font-size: 28rpx;
        font-weight: 500;
      }
      .qiantime{
        color: #666;
        font-size: 25rpx;
        font-weight: 400;
        display: block;
        margin-top: 8rpx;
      }
      .jiajifen{
        margin-left: auto;
        font-size: 28rpx;
        font-weight: 500;
        // color: #ff6000;
        color: green;
      }
      .hong{
        color: red;
      }
    }
  }
</style>
